<template>
  <div class="row first-row">
    <div class="col-6 vi-header">Visual Inspection</div>

    <q-card-actions align="right" class="col-6">
      <q-btn color="white" text-color="dark" no-caps>Reset</q-btn>
      <q-btn color="white" text-color="dark" no-caps>Delete</q-btn>
      <q-btn color="white" text-color="dark" no-caps>Endorse</q-btn>
      <q-btn color="white" text-color="dark" no-caps>Print</q-btn>
    </q-card-actions>
  </div>
  <q-separator size="0.3rem" style="background-color: #a09577"></q-separator>
  <q-card-section>
    <div class="text-h6 text-grey-6">TEST EQUIPMENT</div>
  </q-card-section>
  <q-card class="card-style">
    <q-card-section>
      <div>
        Test equipment used for calibration are traceable to National Standards.
      </div>
    </q-card-section>
    <q-card-section>
      <div>Test equipment (Certification/Test Report NO.):</div>
    </q-card-section>
    <q-card-section> </q-card-section>
    <ScrollArea :bot-margin="350">
      <table style="width: 100%">
        <thead>
          <tr class="row">
            <th class="col-6">Equipment No.</th>
            <th class="col-6">Cert No.</th>
          </tr>
        </thead>
        <hr />
        <tbody>
          <tr
            v-for="(item, index) in items"
            :key="index"
            class="row"
            style="text-align: center"
          >
            <td class="col-6">{{ item.eq_no }}</td>
            <td class="col-6">{{ item.cert_no }}</td>
          </tr>
        </tbody>
      </table>
      <q-card-section></q-card-section>
    </ScrollArea>

    <q-separator size="1rem" style="background-color: #a09577"></q-separator>
  </q-card>
  <div class="footer">
    <div class="q-pa-md">
      <q-card flat>
        <q-card-section class="fac">
          <div>Overall Test Result<span style="color: red">*</span></div>
          <div class="q-pa-sm">
            <div class="q-gutter-sm">
              <q-radio size="xs" v-model="pass" val="pass" label="Pass" />
              <q-radio size="xs" v-model="fail" val="fail" label="Fail" />
            </div>
          </div>
        </q-card-section>
      </q-card>
      <q-card-section class="row">
        <q-card-section class="col-4">
          <div class="q-pa-sm">
            <div class="q-gutter-sm">
              <div class="sm-header">Tested By</div>
              <div class="sm-content">{{ 'C P Lui' }}</div>
              <q-separator></q-separator>
              <div>{{ 'time' }}</div>
            </div>
          </div>
        </q-card-section>
        <q-card-section class="col-4">
          <div class="q-pa-sm">
            <div class="q-gutter-sm">
              <div class="sm-header">Checked By</div>
              <div class="sm-content">{{ 'C P Lui' }}</div>
              <q-separator></q-separator>
              <div>{{ 'time' }}</div>
            </div>
          </div>
        </q-card-section>
        <q-card-section class="col-4">
          <div class="q-pa-sm">
            <div class="q-gutter-sm">
              <div class="sm-header">Endorsed By</div>
              <div class="sm-content">{{ 'N/A' }}</div>
              <q-separator></q-separator>
              <div>{{ 'N/A' }}</div>
            </div>
          </div>
        </q-card-section>
      </q-card-section>
      <q-card-actions class="justify-evenly q-pa-md">
        <q-btn label="Cancel" class="q-ml-sm grey-btn" @click="cancel" />
        <q-btn class="grey-btn" label="Save" type="submit" @click="save" />
      </q-card-actions>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollArea from 'src/components/ScrollArea.vue';
import { ref } from 'vue';

const pass = ref('pass');
const fail = ref('fail');

function save() {
  return;
}

function cancel() {
  return;
}
const items = [
  {
    id: 1,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'missing',
  },
  {
    id: 1,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'missing',
  },
  {
    id: 1,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'missing',
  },
  {
    id: 1,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'missing',
  },
  {
    id: 1,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    eq_no: '681700085',
    cert_no: 'SN12345',
    status: 'missing',
  },
];
</script>

<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0.5rem;
  border: 1px solid #d9d9d9;
}

table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
  height: 30px;
}
.vi-header {
  font-size: 2.2rem;
  font-weight: 900;
}
.first-row {
  padding: 16px 8px 0px 8px;
}
.sm-header {
  font-size: 0.5rem;
  font-weight: 900;
}
.sm-content {
  font-size: 1rem;
  color: #858585;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>
